<template>
    <div id="wrap">
        <div class="head">
            <div class="l-btn" onclick="window.history.back()"></div>
            <div class="header clear">公告</div>
            <div class="zero"></div>
        </div>
        <div class="yeas">2020年</div>
        <div class="announcement" v-for="(v,i) in Lists" :key="i" @click="fn()">
          <router-link :to="{path:'/xiangqq',query:{id:v.id}}">
          <div class="anList"> 
            
            <p class="anList-item">
              <span>{{v.pushTime.split(' ')[0]}}</span>
              <span>{{v.pushTime.split(' ')[1]}}</span>
            </p>
            <p class="center">{{v.title}}</p>
            <p class="anList-Titem" v-show="v.isRead=0" >
              未读<sup class="List-sup"></sup>
              <span class="Unread"></span>
            </p>
             <p class="anList-Titem" v-show="v.isRead=1">
              已读
              <span class="Unread"></span>
            </p>
          </div>
          </router-link>
          


        </div>
    </div>
</template>

<script>
// import Xxq from "@/components/footer/footer";
  export default {
    name: 'Gonggao',
    data () {
      return {
        Lists:[]
      }
      },
   created(){
    //  src/data/gonggao.data
    //  http://192.168.1.114:8088/portal/notice/getNoticeList
    this.$http.get("/api/portal/notice/getNoticeList").then((d)=>{
      // console.log("==",d)
       this.Lists=d.data.data 
   }).catch((err)=>{
     console.log(err)
   })
   /*****查询已读未读******/
  //  console.log("我需要的数据",)
  //  this.$http.get("/api/portal/notice/getUnreadStatus",
  //    {params:{
  //      noticeId:this.$route.query.id,
  //       userId:1,
  //       isRead:1
  //       }}
      
  //    ).then((idx)=>{
  //      console.log("===",idx);
  
  //    })
  },
    methods:{
   fn(){
    this.$http.post('/api/portal/notice/addUnreadStatus',{
      
        noticeId:this.$route.query.id,
        userId:1,
        isRead:1
    }).then((idx)=>{
      console.log(1)
   })
     
   
  }
      }

  }
</script>

<style scoped>
.wrapper {
  width: 100%;
  z-index: 2;
  background: #fff;
}
.head {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(59, 62, 223);
  border-bottom: 1px solid #e8eaec;
  z-index: 99;
}
.l-btn {
  width: 30%;
  height: 1rem;
  background: url(../../assets/images/history.png) no-repeat 0 0;
  margin-top: 0.5rem;
  background-size: 0.6rem;
}
.header {
  width: 30%;
  text-align: center;
  font-size: 0.4rem;
  color: #f2f4f5;
}
.zero {
  width: 30%;
}
.announcement{
  width: 100%;
  height: auto;
}
.yeas{
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  font-size: .18rem;
  padding-left: 20%;
}
.anList{
  width: 100%;
  height: .7rem;
  font-size: .22rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.center{
  width: 60%;
  line-height: .5rem;
  color: #000000;
}
.anList-item span{
  display: block;
}
.anList-item span:nth-child(2){
  color: rgb(150, 148, 148);
}
.anList-item span:nth-child(1){
  color: #000000;
}
.anList-Titem{
  color: rgb(150, 148, 148);
}

.Unread{
  width: .3rem;
  height: .3rem;
  background: blue;
  margin-top: 0.5rem;
  background-size: 0.6rem;
}
.List-sup{
  display: inline-block;
  margin-bottom:0.2rem;
  width:0.07rem;
  height:0.07rem;
  background: red;
  border-radius: 50%;
}
</style>
